<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/swiperDetail.css">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>detail</title>
</head>
<body>
    <div class="items">
        <div class="lists">
            <div class="list_1">
                <ul>
                    <li class="list_top"><p>出境畅游</p></li>
                    <li class="list_top"><p>国内热门</p></li>
                    <li class="list_top"><p>户外探索</p></li>
                    <li class="list_top"><p>亲子野趣</p></li>
                    <li class="list_top"><p>风光摄影</p></li>
                    <li class="list_top"><p>高端度假</p></li>
                    <li class="list_top"><p>主题玩法</p></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="colloction">
        <div class="colloction2">
            <img src="./img/z_manyou.jpg" alt="" class="bg1">
            <img src="./img/z_manyou2.jpg" alt="" class="bg1">
        </div>
        <div class="col">
            <img src="./img/z_chujingchangyou.jpg" alt="" class="bg1">
            <div class="lists1">
                <div class="list_11">
                    <ul>
                        <li class="list_top1"><p>出境爆款</p></li>
                        <li class="list_top1"><p>亚洲</p></li>
                        <li class="list_top1"><p>欧美澳</p></li>
                        <li class="list_top1"><p>中东非</p></li>
                    </ul>
                </div>
            </div>
            <div class="header-mark"></div>
            <div class="card">  
                <img class="bg2" src="./img/z_fist.jpg" alt="" ></img> 
                <span class="dingwei">上海或胡志明...出发</span>
                <div class="product">
                    <div class="bao">
                        <span class="baopin">爆品</span>
                        <span>越南全景 | 出境不过万，一眼邂逅三国混血风情</span>
                    </div>
                    <div class="gentuan">
                        <span>跟团游|懒人慢游|6~7天</span>
                        <span class="txt1">1781人已报名</span>
                    </div>
                    <div class="tag1">
                        <div class="one">早鸟特惠</div>
                        <div class="two">游侠客独立团</div>
                        <div class="two">出境游第一站</div>
                        <div class="two">高销量高口碑</div>
                        <div class="two">支持自理机票</div>
                    </div>
                    <div class="tag3">
                        <div class="tag2">
                            <div class="three">
                                <p class="txt2">仅剩2个名额</p>
                                <p class="txt3">10/01(周三)-10/07</p>
                                <p class="price">￥8580</p>
                                <p class="xing">确定成行</p>
                            </div>
                            <div class="three">
                                <p class="txt2">仅剩2个名额</p>
                                <p class="txt3">10/01(周三)-10/07</p>
                                <p class="price">8350</p>
                                <p class="xing">确定成行</p>
                            </div>
                        </div>
                        <p class="txt4">查看更多</p>
                    </div>
                </div>
            </div>
            <div class="block"></div>
            <img class="bg8" src="./img/z_gengduo.gif" alt="分隔图">

        </div>
        <div class="col">
            <img src="./img/z_baokuan.jpg" alt="" class="bg1">
            <div class="lists2">
                <div class="list_2">
                    <ul>
                        <li class="list_top2"><p>国内热门</p></li>
                        <li class="list_top2"><p>新疆</p></li>
                        <li class="list_top2"><p>西北</p></li>
                        <li class="list_top2"><p>内蒙</p></li>
                        <li class="list_top2"><p>东北</p></li>
                        <li class="list_top2"><p>川藏</p></li>
                        <li class="list_top2"><p>云贵</p></li>
                        <li class="list_top2"><p>秦晋</p></li>
                        <li class="list_top2"><p>华东</p></li>
                    </ul>
                </div>
            </div>
            <div class="block2"></div>
        </div>
        <div class="col">
            <img src="./img/z_huwai.jpg" alt="" class="bg1">
            <div class="lists2">
                <div class="list_2">
                    <ul>
                        <li class="list_top2"><p>爆款</p></li>
                        <li class="list_top2"><p>出境</p></li>
                        <li class="list_top2"><p>云贵</p></li>
                        <li class="list_top2"><p>川藏</p></li>
                        <li class="list_top2"><p>西北</p></li>
                        <li class="list_top2"><p>秦晋</p></li>
                        <li class="list_top2"><p>内蒙</p></li>
                        <li class="list_top2"><p>华中</p></li>
                        <li class="list_top2"><p>华南</p></li>
                    </ul>
                </div>
            </div>
            <div class="block3"></div>
        </div>
        <div class="col">
            <img src="./img/z_qinzi.jpg" alt="" class="bg1">
            <div class="lists2">
                <div class="list_2">
                    <ul>
                        <li class="list_top2"><p>境外</p></li>
                        <li class="list_top2"><p>西北</p></li>
                        <li class="list_top2"><p>内蒙</p></li>
                        <li class="list_top2"><p>西南</p></li>
                        <li class="list_top2"><p>华东</p></li>
                        <li class="list_top2"><p>华北东北</p></li>
                        <li class="list_top2"><p>秦晋</p></li>
                        <li class="list_top2"><p>华南</p></li>
                        <li class="list_top2"><p>华中</p></li>
                    </ul>
                </div>
            </div>
            <div class="block4"></div>
        </div>
        <div class="col">
            <img src="./img/z_sheying.jpg" alt="" class="bg1">
            <div class="lists2">
                <div class="list_2">
                    <ul>
                        <li class="list_top2"><p>秋摄爆款</p></li>
                        <li class="list_top2"><p>出境摄影</p></li>
                        <li class="list_top2"><p>新疆&东蒙</p></li>
                        <li class="list_top2"><p>西北&四川</p></li>
                        <li class="list_top2"><p>云贵&西藏</p></li>
                        <li class="list_top2"><p>秦晋&华中</p></li>
                        <li class="list_top2"><p>华南&华东</p></li>
                    </ul>
                </div>
            </div>
            <div class="block5"></div>
        </div>
          <div class="col">
            <img src="./img/z_dujia.jpg" alt="" class="bg1">
            <div class="lists2">
                <div class="list_2">
                    <ul>
                        <li class="list_top2"><p>爆款</p></li>
                        <li class="list_top2"><p>西南</p></li>
                        <li class="list_top2"><p>西北</p></li>
                        <li class="list_top2"><p>华南</p></li>
                        <li class="list_top2"><p>出境</p></li>
                    </ul>
                </div>
            </div>
            <div class="block6"></div>
        </div>
        <div class="col">
            <img src="./img/z_zhuti.jpg" alt="" class="bg1">
            <div class="lists1">
                <div class="list_11">
                    <ul>
                        <li class="list_top1"><p>向野房车</p></li>
                        <li class="list_top1"><p>越野派</p></li>
                        <li class="list_top1"><p>瑜伽行</p></li>
                        
                    </ul>
                </div>
            </div>
            <div class="block7"></div>
        </div>
        <img src="./img/z_yxk.jpg" alt="" class="bg1">
    </div>
    <div onclick="back()" class="back">
        <img class="pe2" src="./img/z_shouye2.png" alt="返回图标">
        <p class="t1">返回首页</p>
    </div>
    
</body>
<script src="./js/reset.js"></script>
<script>
    const block=document.querySelector('.block')
    fetch("https://h5.youxiake.com/api/topic/web/h5/nav/data?navId=29455&h5Id=12955").then(res=> res.json()).then(res1=> {
        console.log(res1.data.infoBean.info)
        res1.data.infoBean.info.forEach(item => {
            block.innerHTML+=`
            <div class="odd">   
                <img src="${item.image}" alt="" class="pe1">
                <span class="dingwei">${item.jihedi || '默认出发地'}</span>
                <span class="dingwei2">10/01确定成行</span>
                <div class="odd2">
                    <div class="bao11">
                        <p class="txt5"><span class="baopin">${item.brandTag || '爆品'}</span> ${item.productName || '未命名产品'}</p>
                    </div>
                    <div class="gentuan">
                        <span>${item.classType || ''} ${item.classTheme || '懒人慢游'} ${item.days || '6~7天'}</span>
                    </div>
                    <div class="tag11">
                        <div class="two">高销量高口碑</div>
                        <div class="two" style="margin-left: .25rem;">支持自理机票</div>
                    </div>
                    <div class="bot2">
                        <div class="txt6">
                            <span class="txt8"> ￥ </span>
                            <span class="txt7">${item.price || 8580}</span>
                            <span>起</span>
                        </div>
                        <span class="txt1">${item.sum || 0}</span>
                    </div>
                </div>
            </div>
            `   
        });  
        }).catch(err=> {
            console.log(err)
        })
    const block2=document.querySelector('.block2')
    fetch("https://h5.youxiake.com/api/topic/web/h5/nav/data?navId=29271&h5Id=12955").then(res=> res.json()).then(res1=> {
        console.log(res1.data.infoBean.info)
        res1.data.infoBean.info.forEach(item => {
            block2.innerHTML+=`
            <div class="odd">   
                <img src="${item.image}" alt="" class="pe1">
                <span class="dingwei">${item.jihedi || '默认出发地'}</span>
                <span class="dingwei2">10/01确定成行</span>
                <div class="odd2">
                    <div class="bao11">
                        <p class="txt5"><span class="baopin">${item.brandTag || '爆品'}</span> ${item.productName || '未命名产品'}</p>
                    </div>
                    <div class="gentuan">
                        <span>${item.classType || ''} ${item.classTheme || '懒人慢游'} ${item.days || '6~7天'}</span>
                    </div>
                    <div class="tag11">
                        <div class="two">高销量高口碑</div>
                        <div class="two" style="margin-left: .25rem;">支持自理机票</div>
                    </div>
                    <div class="bot2">
                        <div class="txt6">
                            <span class="txt8"> ￥ </span>
                            <span class="txt7">${item.price || 8580}</span>
                            <span>起</span>
                        </div>
                        <span class="txt1">${item.sum || 0}</span>
                    </div>
                </div>
            </div>
            `   
        });  
        }).catch(err=> {
            console.log(err)
        })
        const block3=document.querySelector('.block3')
        fetch("https://h5.youxiake.com/api/topic/web/h5/nav/data?navId=29283&h5Id=12955").then(res=> res.json()).then(res1=> {
        console.log(res1.data.infoBean.info)
        res1.data.infoBean.info.forEach(item => {
            block3.innerHTML+=`
            <div class="odd">   
                <img src="${item.image}" alt="" class="pe1">
                <span class="dingwei">${item.jihedi || '默认出发地'}</span>
                <span class="dingwei2">10/01确定成行</span>
                <div class="odd2">
                    <div class="bao11">
                        <p class="txt5"><span class="baopin">${item.brandTag || '爆品'}</span> ${item.productName || '未命名产品'}</p>
                    </div>
                    <div class="gentuan">
                        <span>${item.classType || ''} ${item.classTheme || '懒人慢游'} ${item.days || '6~7天'}</span>
                    </div>
                    <div class="tag11">
                        <div class="two">高销量高口碑</div>
                        <div class="two" style="margin-left: .25rem;">支持自理机票</div>
                    </div>
                    <div class="bot2">
                        <div class="txt6">
                            <span class="txt8"> ￥ </span>
                            <span class="txt7">${item.price || 8580}</span>
                            <span>起</span>
                        </div>
                        <span class="txt1">${item.sum || 0}</span>
                    </div>
                </div>
            </div>
            `   
        });  
        }).catch(err=> {
            console.log(err)
        })
        const block4=document.querySelector('.block4')
        fetch("https://h5.youxiake.com/api/topic/web/h5/nav/data?navId=29432&h5Id=12955").then(res=> res.json()).then(res1=> {
        console.log(res1.data.infoBean.info)
        res1.data.infoBean.info.forEach(item => {
            block4.innerHTML+=`
            <div class="odd">   
                <img src="${item.image}" alt="" class="pe1">
                <span class="dingwei">${item.jihedi || '默认出发地'}</span>
                <span class="dingwei2">10/01确定成行</span>
                <div class="odd2">
                    <div class="bao11">
                        <p class="txt5"><span class="baopin">${item.brandTag || '爆品'}</span> ${item.productName || '未命名产品'}</p>
                    </div>
                    <div class="gentuan">
                        <span>${item.classType || ''} ${item.classTheme || '懒人慢游'} ${item.days || '6~7天'}</span>
                    </div>
                    <div class="tag11">
                        <div class="two">高销量高口碑</div>
                        <div class="two" style="margin-left: .25rem;">支持自理机票</div>
                    </div>
                    <div class="bot2">
                        <div class="txt6">
                            <span class="txt8"> ￥ </span>
                            <span class="txt7">${item.price || 8580}</span>
                            <span>起</span>
                        </div>
                        <span class="txt1">${item.sum || 0}</span>
                    </div>
                </div>
            </div>
            `   
        });  
        }).catch(err=> {
            console.log(err)
        })
    const block5=document.querySelector('.block5')
    fetch("https://h5.youxiake.com/api/topic/web/h5/nav/data?navId=29513&h5Id=12955").then(res=> res.json()).then(res1=> {
        console.log(res1.data.infoBean.info)
        res1.data.infoBean.info.forEach(item => {
            block5.innerHTML+=`
            <div class="odd">   
                <img src="${item.image}" alt="" class="pe1">
                <span class="dingwei">${item.jihedi || '默认出发地'}</span>
                <span class="dingwei2">10/01确定成行</span>
                <div class="odd2">
                    <div class="bao11">
                        <p class="txt5"><span class="baopin">${item.brandTag || '爆品'}</span> ${item.productName || '未命名产品'}</p>
                    </div>
                    <div class="gentuan">
                        <span>${item.classType || ''} ${item.classTheme || '懒人慢游'} ${item.days || '6~7天'}</span>
                    </div>
                    <div class="tag11">
                        <div class="two">高销量高口碑</div>
                        <div class="two" style="margin-left: .25rem;">支持自理机票</div>
                    </div>
                    <div class="bot2">
                        <div class="txt6">
                            <span class="txt8"> ￥ </span>
                            <span class="txt7">${item.price || 8580}</span>
                            <span>起</span>
                        </div>
                        <span class="txt1">${item.sum || 0}</span>
                    </div>
                </div>
            </div>
            `   
        });  
        }).catch(err=> {
            console.log(err)
        })
        const block6=document.querySelector('.block6')
    fetch("https://h5.youxiake.com/api/topic/web/h5/nav/data?navId=29317&h5Id=12955").then(res=> res.json()).then(res1=> {
        console.log(res1.data.infoBean.info)
        res1.data.infoBean.info.forEach(item => {
            block6.innerHTML+=`
            <div class="odd">   
                <img src="${item.image}" alt="" class="pe1">
                <span class="dingwei">${item.jihedi || '默认出发地'}</span>
                <span class="dingwei2">10/01确定成行</span>
                <div class="odd2">
                    <div class="bao11">
                        <p class="txt5"><span class="baopin">${item.brandTag || '爆品'}</span> ${item.productName || '未命名产品'}</p>
                    </div>
                    <div class="gentuan">
                        <span>${item.classType || ''} ${item.classTheme || '懒人慢游'} ${item.days || '6~7天'}</span>
                    </div>
                    <div class="tag11">
                        <div class="two">高销量高口碑</div>
                        <div class="two" style="margin-left: .25rem;">支持自理机票</div>
                    </div>
                    <div class="bot2">
                        <div class="txt6">
                            <span class="txt8"> ￥ </span>
                            <span class="txt7">${item.price || 8580}</span>
                            <span>起</span>
                        </div>
                        <span class="txt1">${item.sum || 0}</span>
                    </div>
                </div>
            </div>
            `   
        });  
        }).catch(err=> {
            console.log(err)
        })
        const block7=document.querySelector('.block7')
    fetch("https://h5.youxiake.com/api/topic/web/h5/nav/data?navId=29391&h5Id=12955").then(res=> res.json()).then(res1=> {
        console.log(res1.data.infoBean.info)
        res1.data.infoBean.info.forEach(item => {
            block7.innerHTML+=`
            <div class="odd">   
                <img src="${item.image}" alt="" class="pe1">
                <span class="dingwei">${item.jihedi || '默认出发地'}</span>
                <span class="dingwei2">10/01确定成行</span>
                <div class="odd2">
                    <div class="bao11">
                        <p class="txt5"><span class="baopin">${item.brandTag || '爆品'}</span> ${item.productName || '未命名产品'}</p>
                    </div>
                    <div class="gentuan">
                        <span>${item.classType || ''} ${item.classTheme || '懒人慢游'} ${item.days || '6~7天'}</span>
                    </div>
                    <div class="tag11">
                        <div class="two">高销量高口碑</div>
                        <div class="two" style="margin-left: .25rem;">支持自理机票</div>
                    </div>
                    <div class="bot2">
                        <div class="txt6">
                            <span class="txt8"> ￥ </span>
                            <span class="txt7">${item.price || 8580}</span>
                            <span>起</span>
                        </div>
                        <span class="txt1">${item.sum || 0}</span>
                    </div>
                </div>
            </div>
            `   
        });  
        }).catch(err=> {
            console.log(err)
        })


document.addEventListener('DOMContentLoaded', function() {
   
    const navItems = document.querySelectorAll('.list_top');
  
    const contentSections = document.querySelectorAll('.col');
    
   
    if (navItems.length === 0 || contentSections.length === 0) {
        console.log('导航项或内容区块未找到');
        return;
    }
    
    console.log('找到导航项数量:', navItems.length);
    console.log('找到内容区块数量:', contentSections.length);
    
  
    navItems.forEach((item, index) => {
       
        if (!item.dataset.eventAdded) {
            item.dataset.eventAdded = 'true';
            
            item.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                
                console.log('点击了导航项:', index, item.textContent.trim());
                
        
                navItems.forEach(nav => nav.classList.remove('active'));
              
                item.classList.add('active');
                
                if (contentSections[index]) {
                    console.log('滚动到内容区块:', index);
                    
                   
                    const targetPosition = contentSections[index].getBoundingClientRect().top + window.pageYOffset;
                    
                    
                    window.scrollTo({
                        top: targetPosition - 20,
                        behavior: 'smooth'
                    });
                } else {
                    console.log('没有找到对应的内容区块:', index);
                }
            });
        }
    });
    
    function handleScroll() {
        const scrollPosition = window.scrollY + 150; 
        
        contentSections.forEach((section, index) => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;
            const sectionBottom = sectionTop + sectionHeight;
            
            const isVisible = scrollPosition >= sectionTop && scrollPosition < sectionBottom;
            
            if (isVisible && navItems[index]) {
                
                navItems.forEach(nav => nav.classList.remove('active'));
               
                navItems[index].classList.add('active');
                console.log('滚动到可见区域:', index, section);
            }
        });
    }
    
    handleScroll();
    let isScrolling;
    window.addEventListener('scroll', () => {
        clearTimeout(isScrolling);
        isScrolling = setTimeout(handleScroll, 50); 
    });
});
function back(){
        window.location.href='Lindex.html';
    }


</script>
</html>
